<template>

  <div>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content>

        <el-input v-model="listQuery.params.content" placeholder="搜索题目" style="width: 200px;" class="filter-item" />

        <dic-list-select v-model="listQuery.params.quType" dic-code="qu_type" title="选择题型" style="width: 200px;" class="filter-item" />

        <el-button style="float: right" type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>

      </template>

      <template #data-columns>

        <el-table-column
          show-tooltip-when-overflow
          label="试题名称"
          prop="contentText"
        />

        <el-table-column
          label="试题类型"
          prop="quType_dictText"
          align="center"
          width="120px"
        />

        <el-table-column
          label="错误人数"
          prop="userCount"
          align="center"
          width="120px"
        />

        <el-table-column
          label="错误次数"
          prop="errorCount"
          align="center"
          width="120px"
        />

      </template>

    </data-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="人员列表"
      width="60%"
      @close="dialogVisible = false"
    >
      <user-paper-list :exam-id="examId" :user-id="userId" />
    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import { apiErrorQuExport } from '@/api/stat/exam'
import UserPaperList from '@/views/admin/user/exam/paper'
import DicListSelect from '@/components/DicListSelect'

export default {
  name: 'StatQu',
  components: { DicListSelect, UserPaperList, DataTable },
  props: {
    examId: String
  },
  data() {
    return {

      dialogVisible: false,
      userId: '',

      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/stat/exam/error-qu-paging'
      }
    }
  },

  created() {
    this.listQuery.params.examId = this.examId
  },
  methods: {

    // 开始考试
    showPaper(userId) {
      this.userId = userId
      this.dialogVisible = true
    },

    // 导出数据
    handleExport() {
      apiErrorQuExport(this.listQuery)
    }
  }
}
</script>

<style scoped>

.el-dialog-div{
  height: 60vh;
  overflow: auto;
  padding: 10px;
}

</style>
